<template>
  <footer class="footer">
    <div class="site">
      <p class="lovely">MADE WITH <span @click="biu">❤</span> BY WIKS.</p>
      <p class="copyright">
        {{ $t('copyright') }} |
        <a target="_blank" href="https://beian.miit.gov.cn" rel="noreferrer">
          粤ICP备2023022974号
        </a>
      </p>
      <p class="copyright">
        Copyright 2021 Wissbell.com {{ $t('copyRightNotice') }}
      </p>
    </div>
  </footer>
</template>

<script>
export default {
  data() {
    return {
      counter: 0,
      symbolArr: [
        '❤',
        '💛',
        '💚',
        '💙',
        '💜',
        '💗',
        '💓',
        '💕',
        '💖',
        '💞',
        '💘',
        '💝',
        '🖤',
        '💔',
        'Awesome!',
        'Epic!!!',
        'Peace&Love',
        '富强',
        '民主',
        '文明',
        '和谐',
        '自由',
        '平等',
        '公正',
        '法治',
        '爱国',
        '敬业',
        '诚信',
        '友善',
      ],
    }
  },
  methods: {
    biu(e) {
      if (!process.client) return
      let index
      let timer = null
      timer && clearTimeout(timer)
      timer = setTimeout(() => {
        this.counter = 0
      }, 5000)
      if (this.counter < this.symbolArr.length) {
        index = this.counter
        this.counter++
      } else {
        index = Math.floor(Math.random() * this.symbolArr.length)
        index = (index + 1) % this.symbolArr.length
      }
      const x = e.pageX
      const y = e.pageY
      const span = document.createElement('span')
      span.textContent = this.symbolArr[index]
      if (Math.round(Math.random()) * 2 - 1 > 0) {
        span.className = 'bubble'
      } else {
        span.className = 'bubble-negative'
      }
      span.style.cssText = [
        'z-index: 9999999; position: absolute; font-size: 104px; font-weight: bold; color: #3333ff; top: ',
        y - 25,
        'px; left: ',
        x - 20,
        'px;',
      ].join('')
      const col = [
        'aqua',
        'black',
        'blue',
        'fuchsia',
        'gray',
        'green',
        'lime',
        'maroon',
        'navy',
        'olive',
        'purple',
        'red',
        'silver',
        'teal',
        'white',
        'yellow',
      ]
      Math.seed = 1999
      const r = Math.floor(Math.random() * col.length)
      span.style.color = col[r]
      const font = ['12px', '16px', '18px', '32px']
      const f = Math.floor(Math.random() * font.length)
      span.style.fontSize = font[f]
      const opacity = ['0.5', '0.8', '1']
      const o = Math.floor(Math.random() * opacity.length)
      span.style.opacity = opacity[o]
      document.body.appendChild(span)
      this.animate(span)
    },
    animate(el) {
      let i = 0
      const id = setInterval(frame, 200)
      function frame() {
        if (i > 5) {
          clearInterval(id)
          el.parentNode.removeChild(el)
        } else {
          i += 2
        }
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.footer {
  width: 100%;
  .site {
    font-size: 0.875rem;
    padding: var(--space-2x) 0;
    background: var(--footer-background);
    min-height: var(--space-large);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--footer-foreground);
    .lovely {
      user-select: none;
      span {
        cursor: pointer;
        color: red;
        padding: 5;
        pointer-events: all;
        position: relative;
        &::before {
          position: absolute;
          content: '';
          left: 50%;
          top: 50%;
          width: 50px;
          height: 50px;
          transform: translate(-50%, -50%);
        }
      }
    }
    .copyright {
      font-size: 12px;
      line-height: 1.3;
      line-height: 1.5;
      margin: 0;
      a {
        color: var(--accent-5);
        text-decoration: none;
      }
    }
  }
}
</style>
